<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浏览器的优化操作(Optimization operations for browsers)</title>
  <!-- 
  在JavaScript开发中，优化浏览器性能是提升用户体验和应用程序响应速度的重要环节。
  一、代码优化
  1. 减少DOM操作：
    - DOM操作是性能瓶颈之一，尽量减少对DOM的直接操作。可以通过批量更新、使用文档片段（DocumentFragment）等方式来减少重绘和重排。
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < 1000; i++) {
        const div = document.createElement('div');
        div.textContent = `Item ${i}`;
        fragment.appendChild(div);
    }
    document.body.appendChild(fragment); // 一次性插入
  2. 避免内存泄漏：
    - 确保及时清理不再使用的对象，避免全局变量和未移除的事件监听器等导致的内存泄漏。

  3. 使用异步加载：
    - 对于不影响初始渲染的资源（如图片、脚本），使用异步加载（如 `async` 和 `defer` 属性）来提高页面的加载速度。
    <script src="script.js" async></script>

  二、资源优化
  1. 压缩和合并资源：
    - 对CSS、JavaScript和图片等资源进行压缩和合并，减少文件大小和请求数量，提升加载速度。

  2. 使用CDN：
    - 使用内容分发网络（CDN）来托管静态资源，可以提高加载速度和可靠性。

  3. 懒加载：
    - 对于图片和其他资源，采用懒加载策略，只有在用户滚动到视口时才加载，从而减少初始加载时间。

  三、网络优化
  1. HTTP/2：
    - 使用HTTP/2协议可以提高网络请求的效率，支持多路复用、头部压缩等特性。

  2. 缓存策略：
    - 利用浏览器缓存，设置适当的缓存控制头，减少重复请求，提高加载速度。

  3. 减少重定向：
    - 减少页面重定向次数，以降低请求延迟。

  四、性能监控
  1. 使用性能分析工具：
    - 利用浏览器的开发者工具（如Chrome DevTools）进行性能分析，识别瓶颈和优化点。

  2. 定期评估：
    - 定期对应用程序进行性能评估，监控响应时间、内存使用和网络请求等指标。

  五、总结
  - 优化浏览器性能涉及多个方面，包括代码优化、资源优化、网络优化和性能监控。
  - 通过减少DOM操作、异步加载、压缩资源、使用CDN、懒加载等手段，可以显著提高页面的加载速度和用户体验。
  - 定期进行性能分析和评估，及时发现和解决性能瓶颈，是保持应用程序高效运行的关键。
   -->
</head>

<body>

  <script>
    // 1. 减少DOM操作：
    // 创建一个文档片段，将所有DOM操作先在内存中完成，然后再一次性插入到页面中
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < 1000; i++) {
      const div = document.createElement('div');
      div.textContent = `Item ${i}`;
      fragment.appendChild(div);
    }

    document.body.appendChild(fragment);

    // 2. 异步加载：
    // 使用async或defer属性，将JavaScript脚本异步加载，避免阻塞页面渲染
    const script = document.createElement('script');
    script.src = 'script.js';
    script.async = true;
    document.head.appendChild(script);


    // 3. 压缩资源：
    // 使用工具（如UglifyJS、Terser）压缩JavaScript和CSS文件，减少文件大小
    // 使用工具（如ImageOptim）压缩图片文件，减少图片大小

    // 4. 使用CDN：将静态资源（如JavaScript、CSS、图片）托管在CDN上，利用CDN的全球节点加速资源加载速度

    // 5. 懒加载：将非首屏内容延迟加载，提高首屏加载速度
    window.addEventListener('load', () => {
      const images = document.querySelectorAll('img[data-src]');
      images.forEach((img) => {
        img.src = img.getAttribute('data-src');
        img.removeAttribute('data-src');
      });
    })

    // 6. 使用Web Workers：将耗时的计算任务放在Web Workers中执行，避免阻塞主线程
    const worker = new Worker('worker.js');
    worker.postMessage(data);
    worker.onmessage = (event) => {
      const result = event.data;
      // 处理结果
    };

    // 7. 闭包：合理使用闭包，避免内存泄漏
    function foo() {
      var name = "foo"
      var age = 18
      var height = 1.88

      function bar() {
        debugger
        console.log(name)
      }

      return bar
    }

    var fn = foo()
    fn()

  </script>

</body>

</html>